<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      v-show="showSearch"
      label-width="68px"
      hide-required-asterisk
    >
    <el-row :gutter="20">
      <el-col :span="6">
        <el-form-item label="" prop="foundTime" :rules="[{required:true,message:'请选择对比期日期范围',trigger:'blur'}]">
        <el-date-picker
          v-model="queryParams.foundTime"
          style="width: 100%"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="daterange"
          range-separator="-"
          start-placeholder="对比期开始日期"
          end-placeholder="对比期结束日期"
          :picker-options="pickerOptions"
          :default-time="['00:00:00', '23:59:59']"
        ></el-date-picker>
      </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="" prop="dateRange" :rules="[{required:true,message:'请选择基础期日期范围',trigger:'blur'}]">
        <el-date-picker
          v-model="queryParams.dateRange"
          style="width: 100%"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="daterange"
          range-separator="-"
          start-placeholder="基础期开始日期"
          end-placeholder="基础期结束日期"
          :picker-options="pickerOptions"
          :default-time="['00:00:00', '23:59:59']"
        ></el-date-picker>
      </el-form-item>
      </el-col>
    </el-row>
      
      
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查 询</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重 置</el-button>
      </el-form-item>
    </el-form>

    <!-- <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row> -->
    <div>
    <el-table v-loading="loading" :data="claimList" style="margin-bottom:100px;" show-summary :summary-method="getSummaries">
      <!-- <el-table-column type="selection" width="55" align="center"/> -->
      <el-table-column label="申请项目统计表" align="center">
      <el-table-column label="编号" type="index" width="55" align="center" />
      <el-table-column label="项目名称" align="center" prop="processName"/>
      <el-table-column label="申请单数" align="center" prop="singular"/>
      <el-table-column label="环比" align="center" prop="linkRelativeRatio">
        <template slot-scope="scope">
          <span v-if="scope.row.linkRelativeRatio">{{scope.row.linkRelativeRatio}}%</span>
          <span v-else>0%</span>
        </template>
      </el-table-column>
      <el-table-column label="占比" align="center" prop="proportion">
        <template slot-scope="scope">
          <span v-if="scope.row.proportion">{{scope.row.proportion}}%</span>
          <span v-else>{{scope.row.proportion}}</span>
          
        </template>
      </el-table-column>
      </el-table-column>
    </el-table>
    </div>
    <div>
       <el-table v-loading="loading" :data="claimList1" style="margin-bottom:100px;" show-summary :summary-method="getSummaries1">
      <!-- <el-table-column type="selection" width="55" align="center" /> -->
      <el-table-column label="申请注销项目统计表" align="center">
        <el-table-column label="编号" type="index" width="55" align="center" />
        <el-table-column label="注销项目名称" align="center" prop="processName" />
        <el-table-column label="申请单数" align="center" prop="singular" />
        <el-table-column label="占比" align="center" prop="proportion">
          <template slot-scope="scope">{{scope.row.proportion}}%</template>
        </el-table-column>
      </el-table-column>
    </el-table>
    </div>
    <div>
       <el-table v-loading="loading" :data="claimList2" show-summary :summary-method="getSummaries2">
      <!-- <el-table-column type="selection" width="55" align="center" /> -->
      <el-table-column label="申请退单项目统计表" align="center" >
        <el-table-column label="编号" type="index" width="55" align="center" />
        <el-table-column label="项目名称" align="center" prop="processName" />
        <el-table-column label="项目退单数" align="center" prop="singular" />
      </el-table-column>
    </el-table>
    </div>
    <div style="padding:0 20px;margin-top:20px">
      <p>退单<span style="color:red"> {{refundStatistics}} </span>份，退单率<span style="color:red"> {{refundStatisticsR}} </span>%</p>
      <p>共受理外网申请单<span style="color:red"> {{wfBusinessVoTotal}} </span>份{{claimList.length > 0 ? "，" : "。"}}
      <span v-for="(item,index) in claimList" :key="index">
        {{item.processName}} <span style="color:red"> {{item.singular}} </span>份{{index === claimList.length-1 ? "。": "、"}}
      </span>
      
      </p>
    </div>
   

    <!-- <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />-->
  </div>
</template>

<script>
import { listProcessApply } from "@/api/businessModule/meter.js";
import {getDataArea} from '@/utils/util.js';
// import { claimTask } from '@/api/workflow/task';
import moment from 'moment'
export default {
  name: "Meter",
  components: {},
  data() {
    return {
      // 禁选当前时间之后的时间
            pickerOptions: {
        disabledDate: (time) => {
                let timeTemp = moment(time).format('YYYY-MM-DD')
                let newTime = moment().format('YYYY-MM-DD')
                return  timeTemp > newTime ;
              },
            },
      // 遮罩层
      loading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 流程待办任务表格数据
      claimList: [],
      claimList1: [],
      claimList2: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        // 日期范围
      dateRange: [],
      foundTime: [],
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
      singularNum: 0,
      linkRelativeRatioNum: 0,
      processName:'合计',
      wfBusinessVoTotal:0,
      refundStatistics:0,
      refundStatisticsR:0,
      linkRelativeRatioTotal:0,
      proportionTotal:0,
      cancellationStatisticsVoTotal:0,
      statisticsProportionTotal:0,
    };
  },
  // beforeRouteEnter(to, from, next) {
  //   next(vm => {
  //     vm.getList()
  //   })
  // },
  created() {
    this.defaultTime()
    this.getList()
  },
  methods: {
    getSummaries(params){
      const { columns, data } = params;
      // console.log( columns, data);
       const sums = [];
        columns.forEach((column, index) => {
          //  console.log(column);
          if (index === 0) {
            sums[index] = '合计';
            return;
          }else if(index===1){
            sums[index]=' '
          }else if(index===2){
            sums[index]=this.wfBusinessVoTotal
          }else if(index===3){
            sums[index]=this.linkRelativeRatioTotal+'%'
          }else if(index===4){
            sums[index]=this.proportionTotal+'%'
          }
         

        });
        // console.log(sums);
        return sums;

    },
    getSummaries1(params){
       const { columns, data } = params;
      // console.log( columns, data);
       const sums = [];
        columns.forEach((column, index) => {
          //  console.log(column);
          if (index === 0) {
            sums[index] = '合计';
            return;
          }else if(index===1){
            sums[index]=' '
          }else if(index===2){
            sums[index]=this.cancellationStatisticsVoTotal
          }else if(index===3){
            sums[index]=this.statisticsProportionTotal+'%'
          }
         

        });
        // console.log(sums);
        return sums;

    },
    getSummaries2(params){
       const { columns, data } = params;
      // console.log( columns, data);
       const sums = [];
        columns.forEach((column, index) => {
          //  console.log(column);
          if (index === 0) {
            sums[index] = '合计';
            return;
          }else if(index===1){
            sums[index]=' '
          }else if(index===2){
            sums[index]=this.refundStatistics
          }
         

        });
        // console.log(sums);
        return sums;

    },
    // 查询时间
    defaultTime() {
      // 当前时间
      const firstDate = moment().format('YYYY-MM-DD HH:mm:ss')
      // 当前上周时间
      const staDate = moment().subtract(1, 'weeks').format('YYYY-MM-DD HH:mm:ss')
      const endDate = moment().subtract(2, 'weeks').format('YYYY-MM-DD HH:mm:ss')
     
      // 获取上周时间周一到周五的数组
      const listTime = getDataArea(staDate)
      // 获取上上周
      const lastlistTime = getDataArea(endDate)

      // const newDate = moment().format('YYYY-MM-DD')

      // console.log(listTime.shift(),listTime);
      // console.log(lastlistTime.shift(),lastlistTime);
      // 同上
      const firstDateTime = listTime.shift()+' '+'00:00:00'
      const firstDateEndTime = listTime.pop()+' '+'23:59:59'
       const firstDatetimeArr = []

      firstDatetimeArr.push(firstDateTime, firstDateEndTime)
      // endDatetimeArr.push(endDateTime, endDateEndTime)
      this.queryParams.foundTime = firstDatetimeArr
      // 
       const endDateTime = lastlistTime.shift()+' '+'00:00:00'
      const endDateEndTime = lastlistTime.pop()+' '+'23:59:59'
       const endDatetimeArr = []
      endDatetimeArr.push(endDateTime,endDateEndTime)
      this.queryParams.dateRange = endDatetimeArr
    },
    /** 查询流程定义列表 */
    getList() {
      this.loading = true;
      if (this.queryParams.foundTime != null && this.queryParams.dateRange != null) {
        listProcessApply({
          contrastStartDate: this.queryParams.foundTime[0],
          contrastEndDate: this.queryParams.foundTime[1],
          foundationStartDate: this.queryParams.dateRange[0],
          foundationEndDate: this.queryParams.dateRange[1]
        }).then(res => {
          // 申请项目统计表
          this.claimList=res.data.wfBusinessVos
          // 申请单数
          this.wfBusinessVoTotal=res.data.wfBusinessVoTotal
          // 环比
          this.linkRelativeRatioTotal=res.data.linkRelativeRatioTotal
          // 占比
          this.proportionTotal=res.data.proportionTotal
          // 注销项目
          // 申请单数
          this.cancellationStatisticsVoTotal=res.data.cancellationStatisticsVoTotal
          // 占比
          this.statisticsProportionTotal=res.data.statisticsProportionTotal
          // 退单项目
          // 退单数





          this.refundStatistics=res.data.refundStatistics
          this.refundStatisticsR=res.data.refundStatisticsR


          this.claimList1=res.data.cancellationStatisticsVos||[]
          this.claimList2=res.data.refundStatisticsVos||[]
          // response.data.forEach((item) => {
          //   this.singularNum += +item.singular
          //   this.linkRelativeRatioNum += +item.linkRelativeRatio
          // })
          // this.claimList = response.data;
          // this.claimList.push({ singular: this.singularNum, linkRelativeRatio: this.linkRelativeRatioNum, processName: this.processName })
          // // this.total = response.total;
          // this.singularNum = 0
          // this.linkRelativeRatioNum = 0
          this.loading = false;
        });
      }
    },
    /** 搜索按钮操作 */
    handleQuery() {
      // this.queryParams.pageNum = 1;
      this.$refs['queryForm'].validate(valid => {
        if (valid) {
          this.getList();
        } else {
           return false
        }
      });
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetFormData("queryForm");
      this.defaultTime()
      this.handleQuery();
    },
    /** 导出按钮操作 */
    handleExport() {
      // this.download('workflow/process/claimExport', {
      //   ...this.queryParams
      // }, `wf_claim_process_${new Date().getTime()}.xlsx`)
    }
  }
};
</script>

<style scoped>
::v-deep .el-table {
  overflow: inherit; 
}
</style>
